<template>
  <div>
    <!-- 订单详情 -->
    <a-modal
      v-model:open="visible"
      width="1200px"
      title="订单预览"
      :footer="null"
      :maskClosable="false"
      @cancel="cancel"
      :zIndex="1001"
    >
      <div v-global-loading="modalloading">
        <a-alert
          message="支付方式校验成功,请确认修改后的订单信息!"
          type="success"
          show-icon
          v-if="isPreview"
        />
        <div style="padding-left: 20px; padding-right: 20px">
          <div style="margin-bottom: 20px">
            <span style="font-size: 16px; font-weight: 800">基本信息</span>
            <a-table
              size="small"
              :dataSource="basicData"
              :columns="basicColumns"
              bordered
              :pagination="false"
            >
              <template #bodyCell="{text, record, index, column}">
                <template v-if="column.title == '支付方式'">
                  {{ isValue(text, payWay) }}
                </template>
              </template>
            </a-table>
          </div>
          <div style="margin-bottom: 20px">
            <span style="font-size: 16px; font-weight: 800">支付信息</span>
            <div style="display: flex">
              <div style="min-width: 500px; padding-left: 80px">
                <p style="line-height: 50px">
                  支付方式：{{ isValue(form.payWay, payWay) }}
                </p>
                <p style="line-height: 50px">支付时间：{{ form.payTime }}</p>
              </div>
              <div style="display: flex">
                <span style="line-height: 120px"
                  >付款凭证:&nbsp;&nbsp;&nbsp;&nbsp;</span
                >
                <div style="line-height: 120px">
                  <FileShow :data="form.payProofImg" :width="100"></FileShow>
                </div>
              </div>
            </div>
          </div>
          <!-- <div style="display: flex; margin-bottom: 10px; line-height: 50px">
            <span style="margin-right: 10px">附件信息: </span
            ><FileShow :data="form.attachment" :height="50"></FileShow>
          </div> -->
          <div style="margin-bottom: 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span style="font-size: 16px; font-weight: 800"
                >采购备注信息</span
              >
            </div>
            <a-table
              size="small"
              :dataSource="materialData"
              :columns="columnsMaterial"
              bordered
              :pagination="false"
            >
              <template #bodyCell="{text, record, index, column}">
                <template v-if="column.title == '附件信息'">
                  <div v-for="item in text">
                    <a :href="item" target="_blank"
                      >查看附件信息({{ item.split("file/")[1] }})</a
                    >
                  </div>
                </template>
              </template>
            </a-table>
          </div>
          <div style="margin-bottom: 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span style="font-size: 16px; font-weight: 800">收货人信息</span>
            </div>
            <a-table
              size="small"
              :dataSource="consigneeData"
              :columns="consigneeColumns"
              bordered
              :pagination="false"
            >
            </a-table>
          </div>
          <div style="margin-bottom: 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span style="font-size: 16px; font-weight: 800">发票信息</span>
            </div>
            <a-table
              size="small"
              :dataSource="invoiceData"
              :columns="invoiceColumns"
              bordered
              :pagination="false"
            >
              <template #bodyCell="{text, record, index, column}">
                <template v-if="column.title == '发票类型'">
                  {{ isValue(text, invoiceType) }}
                </template>
                <template v-if="column.title == '发票附件'">
                  <FileShow :data="text" :height="100"></FileShow>
                </template>
              </template>
            </a-table>
          </div>
          <div style="margin-bottom: 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span style="font-size: 16px; font-weight: 800">商品信息</span>
            </div>
            <a-table
              size="small"
              :dataSource="commodityData"
              :columns="commodityColumns"
              bordered
              :pagination="false"
            >
              <template #bodyCell="{text, record, index, column}">
                <template v-if="column.title == '商品主图'">
                  <a-image :src="text" v-if="text" :width="100"></a-image>
                </template>
                <template v-if="column.title == '商品参数'">
                  <span
                    v-if="record.productSkuValues"
                    class="pointer c-primaryColor"
                    @click="checkSku(record.productSkuValues)"
                    >点击查看</span
                  >
                </template>
              </template>
            </a-table>
          </div>
          <div style="margin-bottom: 20px">
            <span style="font-size: 16px; font-weight: 800">金额</span>
            <a-table
              size="small"
              :dataSource="moneyData"
              :columns="moneyColumns"
              bordered
              :pagination="false"
            >
            </a-table>
          </div>
        </div>
        <div style="display: flex; justify-content: end" v-if="isPreview">
          <a-button style="margin-right: 14px" @click="cancel">取消</a-button>
          <a-button type="primary" @click="submit">确定</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 商品SkU -->
    <a-modal
      v-model:open="visible6"
      width="600px"
      title="商品参数"
      :footer="null"
      :maskClosable="false"
      :zIndex="1002"
    >
      <a-table
        size="small"
        :dataSource="tableDataSku"
        :columns="columnsSku"
        bordered
        :pagination="false"
      >
        <template #bodyCell="{index, text, record, column}"> </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import FileShow from "@/components/functional/FileShow.vue";
const visible = ref(false);
const visible6 = ref(false);
const modalloading = ref(false);
const tableDataSku = ref<Array<any>>([]);
const form = ref<any>(false);
//是否是订单信息预览
const isPreview = ref(false);

//操作
const operation = (data: any, flag = false) => {
  isPreview.value = flag;
  form.value = data;
  //基本信息
  basicData.value = [
    {
      codeSN: data.codeSN,
      sapOrderNum: data.sapOrderNum,
      memberId: data.memberId,
      bodyId: data.bodyId,
      memberName: data.memberName,
      bodyName: data.bodyName,
      addTime: data.addTime,
      confirmReceiptTime: data.confirmReceiptTime,
      payWay: data.payWay
    }
  ];
  if (data.attachment || data.customerRemark || data.customerOrderSN) {
    let url = data.attachment ? data.attachment.split(",") : [];
    materialData.value = [
      {
        attachment: url,
        customerRemark: data.customerRemark,
        customerOrderSN: data.customerOrderSN
      }
    ];
  } else {
    materialData.value = [];
  }
  //收货人信息
  consigneeData.value = [
    {
      consignee: data.consignee,
      consigneePhone: data.consigneePhone,
      consigneeAddress:
        data.consigneeProvince +
        data.consigneeCity +
        data.consigneeCounty +
        data.consigneeAddress,
      remark: data.remark,
      addTime: data.addTime
    }
  ];
  //发票信息
  if (data.orderInvoiceDto) {
    invoiceData.value = [
      {
        invoiceTitle: data.orderInvoiceDto.invoiceTitle,
        invoiceType: data.orderInvoiceDto.invoiceType,
        invoiceRemark: data.orderInvoiceDto.invoiceRemark,
        account: data.orderInvoiceDto.account,
        bank: data.orderInvoiceDto.bank,
        payeeAddress:
          data.payeeProvince +
          data.payeeCity +
          data.payeeCounty +
          data.payeeAddress,
        amount: data.orderInvoiceDto.amount
      }
    ];
  } else {
    if (data.isUploadInvoice) {
      invoiceData.value = [{invoice: data.invoice}];
    } else {
      invoiceData.value = [];
    }
  }

  //商品信息
  commodityData.value = [];
  if (data.orderDetails.length) {
    data.orderDetails.forEach((item) => {
      let img = JSON.parse(item.productImg) || 0;
      commodityData.value.push({
        productImg: img.length > 0 ? img[0].ImgUrl : "",
        productCode: item.productCode,
        productName: item.productName,
        productSkuValues: JSON.parse(item.productSkuValues),
        productSpec: item.productSpec,
        num: item.num,
        refundNum: item.refundNum,
        price: item.memberPrice,
        payAmount: item.amount,
        discountAmount: item.discountAmount,
        surrogateDiscount: item.surrogateDiscount
      });
    });
  }
  //金额
  moneyData.value = [
    {
      amount: data.amount,
      discountAmount: data.discountAmount,
      payAmount: data.payAmount
    }
  ];
  visible.value = true;
};
const emits = defineEmits(["ok", "cancel"]);
//取消
const cancel = () => {
  visible.value = false;
  emits("cancel");
};
//确认
const submit = () => {
  visible.value = false;
  emits("ok");
};
//基本信息表头
const basicData = ref<Array<object>>([]);
const basicColumns = ref<Array<object>>([
  {
    title: "订单编号",
    dataIndex: "codeSN",
    align: "center",
    width: 180
  },
  {
    title: "会员名称",
    dataIndex: "memberName",
    align: "center",
    width: 180
  },
  {
    title: "购买主体",
    dataIndex: "bodyName",
    align: "center",
    width: 180
  },
  {
    title: "下单时间",
    dataIndex: "addTime",
    align: "center",
    width: 180
  },
  {
    title: "自动确认收货时间",
    dataIndex: "confirmReceiptTime",
    align: "center",
    width: 180
  },
  {
    title: "支付方式",
    dataIndex: "payWay",
    align: "center",
    width: 180
  }
]);
//收货人表头
const consigneeData = ref<Array<object>>([]);
const consigneeColumns = ref<Array<object>>([
  {
    title: "姓名",
    dataIndex: "consignee",
    align: "center",
    width: 180
  },
  {
    title: "联系方式",
    dataIndex: "consigneePhone",
    align: "center",
    width: 180
  },
  {
    title: "收货地址",
    dataIndex: "consigneeAddress",
    align: "center",
    width: 180
  },
  // {
  //   title: "订单备注",
  //   dataIndex: "remark",
  //   align: "center",
  //   width: 180
  // },
  // {
  //   title: "系统备注信息",
  //   dataIndex: "remark",
  //   align: "center",
  //   width: 180
  // },
  {
    title: "创建时间",
    dataIndex: "addTime",
    align: "center",
    width: 180
  }
]);
//发票信息表头
const invoiceData = ref<Array<object>>([]);
const invoiceColumns = ref<Array<object>>([
  {
    title: "发票抬头",
    dataIndex: "invoiceTitle",
    align: "center",
    width: 180
  },
  {
    title: "发票类型",
    dataIndex: "invoiceType",
    align: "center",
    width: 180
  },
  {
    title: "账户",
    dataIndex: "account",
    align: "center",
    width: 180
  },
  {
    title: "开户行",
    dataIndex: "bank",
    align: "center",
    width: 180
  },
  {
    title: "地址信息",
    dataIndex: "payeeAddress",
    align: "center",
    width: 180
  },
  {
    title: "开票金额(元)",
    dataIndex: "amount",
    align: "center",
    width: 180
  },
  {
    title: "发票附件",
    dataIndex: "invoice",
    align: "center",
    width: 180
  },
  {
    title: "发票备注",
    dataIndex: "invoiceRemark",
    align: "center",
    width: 180
  }
]);
//商品信息
const commodityData = ref<Array<object>>([]);
const commodityColumns = ref<Array<object>>([
  {
    title: "商品主图",
    dataIndex: "productImg",
    align: "center",
    width: 180
  },
  {
    title: "商品号",
    dataIndex: "productCode",
    align: "center",
    width: 180
  },
  {
    title: "商品名称",
    dataIndex: "productName",
    align: "center",
    width: 180
  },
  {
    title: "商品参数",
    dataIndex: "productSkuValues",
    align: "center",
    width: 180
  },
  {
    title: "属性",
    dataIndex: "productSpec",
    align: "center",
    width: 180
  },
  {
    title: "购买数量",
    dataIndex: "num",
    align: "center",
    width: 180
  },
  {
    title: "退款数量",
    dataIndex: "refundNum",
    align: "center",
    width: 180
  },
  {
    title: "单价",
    dataIndex: "price",
    align: "center",
    width: 180
  },
  {
    title: "商品折扣%",
    dataIndex: "surrogateDiscount",
    align: "center",
    width: 180
  },
  {
    title: "优惠金额",
    dataIndex: "discountAmount",
    align: "center",
    width: 180
  },
  {
    title: "小计",
    dataIndex: "payAmount",
    align: "center",
    width: 180
  }
]);
//金额合计
const moneyData = ref<Array<object>>([]);
const moneyColumns = ref<Array<object>>([
  {
    title: "商品合计",
    dataIndex: "amount",
    align: "center",
    width: 180
  },
  {
    title: "优惠金额",
    dataIndex: "discountAmount",
    align: "center",
    width: 180
  },
  {
    title: "实付",
    dataIndex: "payAmount",
    align: "center",
    width: 180
  }
]);
//支付方式
const payWay = ref([
  {label: "支付宝", value: 1},
  {label: "线下汇款", value: 2},
  {label: "授信支付", value: 3}
]);
//发票类型
const invoiceType = ref([
  {
    label: "增值税专用发票",
    value: "Z1"
  },
  {
    label: "增值税专用电子发票",
    value: "Z3"
  },
  {
    label: "数电增值税专票",
    value: "Z5"
  },
  {
    label: "数电增值税普票",
    value: "Z6"
  }
]);
const isValue = (data, list) => {
  let name;
  list.forEach((item) => {
    if (item.value == data) {
      name = item.label;
    }
  });
  return name;
};
//SKU表头
const columnsSku = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "sort",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    }
  },
  {
    title: "属性名称",
    dataIndex: "ParamName",
    align: "center",
    width: 180
  },
  {
    title: "属性值",
    dataIndex: "ParamValue",
    align: "center",
    width: 180
  }
]);
defineExpose({
  operation,
  modalloading,
  visible
});

const checkSku = (data) => {
  tableDataSku.value = data;
  visible6.value = true;
};
//物料表头
const columnsMaterial = ref([
  {
    title: "客户订单号",
    dataIndex: "customerOrderSN",
    align: "center"
  },
  {
    title: "附件信息",
    dataIndex: "attachment",
    align: "center"
  },
  {
    title: "订单备注信息",
    dataIndex: "customerRemark",
    align: "center"
  }
]);
//物料信息
const materialData: any = ref([]);
</script>

<style lang="less" scoped></style>
